<template>
    <div class="root">
        <timers></timers>
        <div class="bg">
            <div class="write fa fa-camera-retro fa-lg" @click="writemsg"></div>
            <div class="back fa fa-chevron-left fa-lg" @click="back"></div>
        </div>
        <div class="content">
            <div class="headermsg">
                <div class="head"><img @click="usersall" :src="usermsg.header" width="100%" height="100%" alt=""></div>
                <div class="text">
                    <h2>{{usermsg.userName}}</h2>
                </div>
            </div>
            <div class="amsg fir">
                <div class="msgcontainer" v-for="item in saymsg" :key="item.friendmonentsid">
                    <div class="del fa fa-trash-o" @click="del(item.friendmonentsid)" v-if="usermsg.phone === item.userphone">删除</div>
                    <div class="userhead" ref="times">{{item.time | adit}}</div>
                    <div class="usermsg">
                        <div class="name">{{item.username}}</div>
                        <div class="say">{{item.say}}
                            <div v-if="item.url!==''" class="photos">
                                <!-- <img src="../assets/weatherBg/sum.jpg" alt="" width="90px" height="90px">
                                <img src="../assets/weatherBg/rain.jpg" alt="" width="90px" height="90px">
                                <img src="../assets/weatherBg/yintian.jpg" alt="" width="90px" height="90px"> -->
                                <img :src="item.imgurl" alt="" width="90px" height="90px">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            saymsg:[],
            usermsg:[]
        }
    },
    filters:{
        adit:(ev)=>{
            const time = new Date()
            const month = time.getMonth()+1
            const dates = time.getDate()
            let date = (ev.split(' ')[0].split('-')[2])
            let yue = (ev.split(' ')[0].split('-')[1])
            yue = yue.length===2?yue.slice(1,2):yue 
            date = date.length===2?date.slice(1,2):date
            if(month.toString() === yue&&dates.toString() === date){
                return '今天'
            }else{
                return `${yue}月${date}日`
            }
        }
    },
    methods:{
        async del(value){
            const {data:msg} = await this.$http.post('/api/delonemonent',value)
            console.log(msg.code)
            if(msg.code === 200){
                // 删除成功
                alert('删除成功')
                location.reload()  // 手动刷新页面
            }else{
                alert('删除失败')
            }
        },
        back(){
            // console.log('666')
            this.$router.push('/friendsmoments')
        },
        writemsg(){
            // console.log('heihei')
            this.$router.push('/writemsgs')
        },
        async getminemonemts(){
            const {data:msg} = await this.$http.post('/api/minemoments',this.usermsg.userName)
            msg.msg.forEach(item=>{
                this.saymsg.push(item)
            })
            // console.log(this.saymsg)
        },
        usersall(){
            this.$router.push('/userall')
        }
    },
    mounted(){
        this.$store.state.userMsg.push(window.sessionStorage.getItem('userMsg'))
        this.usermsg = JSON.parse(this.$store.state.userMsg[0])
        this.getminemonemts()
        // console.log(this.usermsg)
    }
}
</script>

<style lang="less" scoped>
    .root{
        width: 100%;
        height: 100vh;
        // background-color: rosybrown;
        background-color: rgb(246, 246, 246);
    }
    .bg{
        width: 100%;
        height: 35%;
        // background-color: #2ecc71;
        background: url(../assets/img/moments.jpg) center center no-repeat;
        position: relative;
        .write{
            position: absolute;
            right: 15px;
            top: 25px;
        }
        .back{
            position: absolute;
            top: 25px;
            left: 10px;
        }
    }
    .content{
        width: 100%;
        // height: 100%;
        background-color: rgb(246, 246, 246);
        position: relative;
        .amsg{
            width: 100%;
            // height: 100px;
            // background-color: #2ecc71;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column-reverse;
            .msgcontainer{
                width: 95vw;
                // height: 80px;
                border-top: 1px solid #ccc;
                border-bottom: 1px solid #ccc;
                display: flex;
                position: relative;
                .del{
                    // width: 50px;
                    // height: 30px;
                    position: absolute;
                    // background-color: red;
                    color: rgb(91, 104, 120);
                    bottom: 5px;
                    right: 8px;
                    font-size: 11px;
                }
                .userhead{
                    width: 65px;
                    // height: 45px;
                    // background-color: #e67e22;
                    overflow: hidden;
                    // border-radius: 5px;
                    margin-top: 8px;
                    display: flex;
                    justify-content: center;
                    font-size: 20px;
                    font-weight: bold;
                }
                .usermsg{
                    height: 100%;
                    width: 30px;
                    flex-grow: 1;
                    // background-color: royalblue;
                    .name{
                        width: 100%;
                        height: 28px;
                        line-height: 28px;
                        padding-left: 5px;
                        margin-top: 5px;
                        // background-color: salmon;
                    }
                    .say{
                        width: 100%;
                        // height: 50px;
                        // background-color: silver;
                        font-size: 15px;
                        padding-left: 5px;
                        // line-height: 50px;
                    }
                    .photos{
                        // margin: 5px 0;
                        width: 100%;
                        // height: 100px;
                        // background-color: #bfa;
                        img{
                            margin-left: 5px;
                        }
                        margin-bottom: 5px;
                    }
                }
                .foot{
                    color: rgb(146, 146, 146);
                    padding-top: 5px;
                }
            }
        }
        .fir{
            margin-top: 30px;
        }
    }
    .headermsg{
        height: 65px;
        width: 100%;
        // border: 1px solid #ccc;
        position: absolute;
        top: -77px;
        display: flex;
        .text{
            height: 65px;
            width: 20px;
            flex-grow: 1;
            // background-color: royalblue;
            text-align: right;
            padding-right: 8px;
            line-height: 65px;
            color: #fff;
        }
        .head{
            width: 65px;
            height: 65px;
            // background-color: rosybrown;
            margin:0 8px;
            border-radius: 7px;
            overflow: hidden;
        }
    }
    h2{
        text-align: left;
    }
</style>
